<template>
  <div class="paymentCode">
    <el-row>
      <el-col>
        <!-- 新码 -->
        <div class="flex">
          <div class="code_title">生成新码</div>
          <span>（卡优优收款码）</span>    
        </div>
        <el-form :model="newCode" status-icon :rules="rules" ref="newCode" label-width="150px" class="demo-ruleForm-1">
					<el-form-item label="最新生成ID：">
						<div>{{PayCode}}</div>
					</el-form-item>
          <el-form-item label="选择生成类型：" prop="type">
						<el-radio-group v-model="newCode.type">
              <el-radio :label="3">小码</el-radio>
              <el-radio :label="4">中码</el-radio>
              <el-radio :label="5">大码</el-radio>
            </el-radio-group>
					</el-form-item>
          <el-form-item label="选择生成数量：" prop="num">
						<el-radio-group v-model="newCode.num">
              <el-radio :label="5">5</el-radio>
              <el-radio :label="10">10</el-radio>
              <el-radio :label="20">20</el-radio>
              <el-radio :label="50">50</el-radio>
            </el-radio-group>
					</el-form-item>
          <el-form-item label="输入发送邮箱：" prop="sendMail">
            <el-input v-model="newCode.sendMail"></el-input>
					</el-form-item>
          <el-form-item>
						<el-button :loading="loading" type="primary" @click="getNewCode('newCode')">生成新码</el-button>
					</el-form-item>
				</el-form>
        <!-- 旧码 -->
        <div class="flex">
          <div class="code_title">获取旧码</div>
          <span>（卡优优收款码）</span>    
        </div> 
        <el-form :model="oldCode" status-icon :rules="rules" ref="oldCode" label-width="150px" class="demo-ruleForm-2">
					<el-form-item label="最新生成ID：">
						<div>{{PayCode}}</div>
					</el-form-item>
          <el-form-item label="输入旧码ID：" prop="payNo">
						<el-input v-model="oldCode.payNo" @keyup.enter.native="formattingPayNo" placeholder="" autocomplete='off'></el-input>
            <span class="txt">最多可以输入20个ID，输入回车分隔编号</span>
					</el-form-item>
          <el-form-item label="输入发送邮箱：" prop="sendMail">
            <el-input  v-model="oldCode.sendMail"></el-input>
					</el-form-item>
          <el-form-item label="选择生成类型：" prop="type">
						<el-radio-group v-model="oldCode.type">
              <el-radio :label="3">小码</el-radio>
              <el-radio :label="4">中码</el-radio>
              <el-radio :label="5">大码</el-radio>
            </el-radio-group>
					</el-form-item>
          <el-form-item>
						<el-button :loading="oldLoading" type="primary" @click="getOldCode('oldCode')">获取旧码</el-button>
					</el-form-item>
				</el-form>
        <!-- 卡优优店铺码 -->
        <div class="flex">
          <div class="code_title">获取卡优优店铺码</div>
        </div> 
        <el-form :model="kyyCode" status-icon :rules="rules" ref="kyyCode" label-width="150px" class="demo-ruleForm-2">
          <el-form-item label="输入商户编号：" prop="merchantIdList">
						<el-input v-model="kyyCode.merchantIdList" @keyup.enter.native="formattingKyyCode" placeholder="" autocomplete='off'></el-input>
            <span class="txt">最多输入20个编号，输入回车分隔编号</span>
					</el-form-item>
          <el-form-item label="输入发送邮箱：" prop="sendMail">
            <el-input  v-model="kyyCode.sendMail"></el-input>
					</el-form-item>
          <el-form-item label="选择生成类型：" required>
						<el-radio-group v-model="radio">
              <el-radio :label="1">大码</el-radio>
            </el-radio-group>
					</el-form-item>
          <el-form-item>
						<el-button :loading="kyyLoading" type="primary" @click="getKyyCode('kyyCode')">获取店铺码</el-button>
					</el-form-item>
				</el-form>
      </el-col>
    </el-row>
    
  </div>
</template>
<script>
// components
// api
import { getLastPayCode,addPayCode,addShopCode} from "@/api/setting";

// mixins
import handlePageMixin from "@/mixins/handlePageMixin";

export default {
  name: "settingList",
  components: {
     
  },
  mixins: [handlePageMixin],
  data() {
    var validateEmail = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入邮箱号'));
			} else {
        const emailText = /^([a-zA-Z0-9]+[_|_|\-|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,6}$/
        let isEmail = emailText.test(value)
        if (!isEmail) {
          callback(new Error('请输入正确邮箱号'));
        } else {
          callback();
        }
				callback();
			}
		};
    return {
      loading: false,
      oldLoading: false,
      kyyLoading: false,
      radio: 1,
      options: [
        { id: "", value: "全部" },
        { id: "1", value: "子账号名称" },
        { id: "2", value: "手机号" },
      ],
      type: [
        { id: 1, value: "正常" },
        { id: 2, value: "禁用" },
      ],
      PayCode: '',
      // 新收款码
      newCode: {
        num	: "", //生成新码的数量（生成旧码时不需要传）
        sendMail: "", //发送邮件
        type: "", //3 小码 4 中码 5 大码
        isOld: '2'
      },
      // 旧收款码
      oldCode: {
        sendMail: "", //发送邮件
        type: "",//3 小码 4 中码 5 大码
        payNo: "",//	指定收款码编号（生成新码时不传）
        isOld: '1'
      },
      // 卡优优店铺码
      kyyCode:{
        merchantIdList:'',//商家编号
        sendMail:'',//发送邮箱
      },
      rules: {
        payNo: [{ required: true,  message: "请输入旧码ID", trigger: "blur" }],
        sendMail: [{ validator: validateEmail,required: true,   trigger: ["blur",'change'] }],
        num: [{ required: true, message: "请选择数量", trigger: "change" }],
        type: [{ required: true, message: "请选择码大小", trigger: "change" }],
        merchantIdList:[{ required: true,  message: "请输入商户编号", trigger: ["blur",'change'] }]
      },
    };
  },
  created() {
    this.getLastPayCode()
  },
  mounted() {},
  methods: {
    getLastPayCode(){
      getLastPayCode().then((res)=>{
        console.log('收款码',res)
        this.PayCode = res.result
      })
    },
    //格式化旧码
    formattingPayNo(){
      this.oldCode.payNo +=','
      console.log('this.oldCode.payNo',this.oldCode.payNo)
    },
    //格式化卡优优店铺码
    formattingKyyCode(){
      this.kyyCode.merchantIdList +=','
    },
    //生成新码
    getNewCode(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          var params = {
            num: this.newCode.num,
            sendMail: this.newCode.sendMail,
            isOld:this.newCode.isOld,
            type:this.newCode.type,
          }
          console.log('params',params)
          addPayCode(params).then(res => {
            this.handleSuccess("邮件已发送，请查收")
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //获取旧码
    getOldCode(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.oldLoading = true
          var params = {
            sendMail: this.oldCode.sendMail,
            isOld:this.oldCode.isOld,
            type:this.oldCode.type,
            payNo: this.oldCode.payNo
          }
          console.log('params',params)
          addPayCode(params).then(res => {
            this.handleSuccess("邮件已发送，请查收")
            this.oldLoading = false
          }).catch(() => {
            this.oldLoading = false
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 获取卡优优店铺码
    getKyyCode(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.kyyLoading = true
          var params = {
            ...this.kyyCode
          }
          addShopCode(params).then(res => {
            this.handleSuccess("邮件已发送，请查收")
            this.kyyLoading = false
          }).catch(() => {
            this.kyyLoading = false
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleSuccess(msg) {
      if (msg === '已拒绝') {
        var type = 'error'
      } else {
        var type = 'success'
      }
      this.$message({
        message: msg,
        type: type,
        duration: 1500,
      })
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./style/setting";
.paymentCode{
  padding: 20px 20px 40px 20px;
	border-radius: 4px;
	.code_title{
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    height: 40px;
    line-height: 40px;
    border-bottom: 2px solid #1890ff;
    padding: 0 16px;
	}
  .txt{
    font-size: 12px;
    color: #1890ff;
    margin-left: 8px;
  }
}
.paymentCode ::v-deep .el-row{
	background: #fff;
	padding: 20px;
}
.paymentCode ::v-deep .el-select .el-input {
  width: 130px;
}
.demo-ruleForm-1{
  .el-input {
    width: 400px;
  }
}
.demo-ruleForm-2{
  .el-input {
    width: 400px;
  }
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.flex{
  display: flex;
  align-items: center;
  font-size: 14px;
  margin-bottom: 20px;
}
</style>